@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700|Roboto+Slab:700|Open+Sans:400,700&subset=latin,latin-ext,cyrillic)

$vs: 22pt


body
  font-family: "Open Sans", sans-serif
  line-height: $vs

select
  border: none
  border-radius: 3px

button
  margin-left: 5px
  border: none
  border-radius: 3px
  padding: 2px 6px
  text-decoration: none
  &:hover
    background: #f5f5f5

h1, h2, h3, h4, h5, h6
  font-family: "Roboto Slab", serif

h1, h2, h3, h4, h5, h6, p, li, hr
  padding: 0
  margin: $vs 0 0 0
  line-height: $vs

li+li
  margin-top: 0

.container
  max-width: 60em
  margin: 0px auto

  @media all and (max-width: 880px)
    margin: 0px 20px

#doc
  font-size: 14pt
  .highlight
    font-family: "Ubuntu Mono", monospace
    line-height: 18pt
    display: block
  img
    max-width: 100%

  footer
    margin-top: 60px
    text-align: right
    color: #777

// Modifications to highlighting
.highlight
  background: #eee
  padding: 0 18pt
  margin-top: $vs
  overflow-x: auto

  &.c
    font-style: normal
  .c1
    font-style: normal
  .nb, .nf, .k
    font-weight: 700
  .n
    color: #333

table
  margin-top: $vs
  width: 100%

th, td
  text-align: left
  border-bottom: 1px solid #eee
  line-height: $vs * 1.5
  h1, h2, h3, h4, h5, h6, p
    &:first-child
      margin-top: 0

th.name
  width: 50%

th.lang
  width: 50%

td.name a
  font-size: 1.2em
  font-weight: bold

td.lang a
  background: #eee
  border-bottom: 2px solid #ddd
  border-radius: 3px
  padding: 0 5px
  text-decoration: none
  &:hover
    background: #f5f5f5
  &.selected
    background: #ff9

// Responsive table

@media all and (max-width: 620px)

  tr
    display: block
    border-bottom: 3px solid #eee
    margin-bottom: 10px

  th.name
    display: block
    width: 100%

  th.lang
    display: none

  td.name
    display: block
    font-size: 16pt
    line-height: 24pt

  td.lang
    display: block
    text-align: right

.share
  float: right
  text-align: center
  line-height: 40px
  background: #eee
  padding: 0 20px
  border-radius: 3px
  border-bottom: 2px solid #ddd
  .sharemsg
    font-weight: bold
    display: block

.lang-choice
  float: right

.theme-choice
  float: right
  clear: right
